<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle">
        <el-button type="primary" :icon="Plus" @click="handleAdd">{{ $t('message.common.add') }}</el-button>
        <el-popconfirm :title="$t('message.common.delTip')" @confirm="handleDel(chooseData)">
          <template #reference>
            <el-button type="danger" :icon="Delete" v-permission="['超级管理员']" :disabled="chooseData.length === 0">{{ $t('message.common.delBat')
              }}</el-button>
          </template>
        </el-popconfirm>
      </div>
      <div class="layout-container-form-search">
        <el-input v-model="query.keyWord" placeholder="请输入任务描述检索" clearable
          @change="getTableData(true)"></el-input>
        <el-button type="primary" :icon="Search" class="search-btn" @click="getTableData(true)">{{
          $t('message.common.search')
        }}</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table ref="table" v-model:page="page" v-loading="loading" :showIndex="true" :showSelection="true"
        :data="tableData" @getTableData="getTableData" @selection-change="handleSelectionChange">
        <el-table-column prop="taskMsg" label="任务描述" align="left" width="250"/>
        <el-table-column prop="taskTypeName" label="任务类型" align="center" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.taskTypeTag" effect="light" round>
              {{ scope.row.taskTypeName }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="statusName" label="状态" align="center" /> -->
        <el-table-column prop="creatorName" label="提出人" align="center" />
        <el-table-column prop="createTime" label="提出时间" align="center" >
          <template #default="scope">
            {{ convertDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="processorName" label="处理人" align="center" />
        <el-table-column prop="processTime" label="处理时间" align="center" >
          <template #default="scope">
            {{ convertDate(scope.row.processTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="finishTime" label="完成时间" align="center" >
          <template #default="scope">
            {{ convertDate(scope.row.finishTime) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('message.common.handle')" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button v-permission="['超级管理员', '总经理', '主管']" @click="handleEdit(scope.row)">{{ $t('message.common.update') }}</el-button>
            <el-popconfirm :title="$t('message.common.delTip')" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger" v-permission="['超级管理员']">{{ $t('message.common.del') }}</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
      <Layer :layer="layer" @refreshData="getTableData" v-if="layer.show" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, reactive, inject, watch } from 'vue'
import Table from '@/components/table/index.vue'
import { Page } from '@/components/table/type'
import { getData, del } from '@/api/taskmanage/work'
import Layer from '../work/layer.vue'
import { ElMessage } from 'element-plus'
import type { LayerInterface } from '@/components/layer/index.vue'
import { statusData, taskTypeData, userData } from '../work/enum'
import { Plus, Search, Delete } from '@element-plus/icons'
import Permission from '@/directive/permission'
export default defineComponent({
  components: {
    Table,
    Layer
  },
  directives: {
    Permission
  },
  setup() {
    // 计算属性基本使用
    const convertDate = computed(() => (date: Date) => {
      if (!date) return ''
      return new Date(date).toLocaleString()
    })
    // 存储搜索用的数据
    const query = reactive({
      keyWord: ''
    })
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true
    })
    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 20,
      total: 0
    })
    const activeCategory: any = inject('active')
    const loading = ref(false)
    const tableData = ref([])
    const chooseData = ref([])
    const handleSelectionChange = (val: []) => {
      chooseData.value = val
    }
    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init: boolean) => {
      loading.value = true
      if (init) {
        page.index = 1
      }
      let params = {
        status: activeCategory.value.value,
        pageIndex: page.index,
        pageSize: page.size,
        ...query
      }
      getData(params)
        .then(res => {
          let data = res.data.list
          if (Array.isArray(data)) {
            data.forEach(d => {
              const status = statusData.find(s => s.value === d.status)
              status ? d.statusName = status.label : d.statusName = d.status
              const taskType = taskTypeData.find(t => t.value === d.taskType)
              taskType ? d.taskTypeName = taskType.label : d.taskType
              taskType ? d.taskTypeTag = taskType.type : d.taskType
              const cuser = userData.find(u => u.value === d.creator)
              cuser ? d.creatorName = cuser.label : d.creatorName = d.creator
              const puser = userData.find(u => u.value === d.processor)
              puser ? d.processorName = puser.label : d.creatorName = d.processor
            })
          }
          tableData.value = res.data.list
          page.total = res.data.total
        })
        .catch(error => {
          tableData.value = []
          page.index = 1
          page.total = 0
        })
        .finally(() => {
          loading.value = false
        })
    }
    // 删除功能
    const handleDel = (data: object[]) => {
      let params = {
        ids: data
          .map((e: any) => {
            return e.id;
          }),
      };

      del(params.ids)
        .then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getTableData(tableData.value.length === 1 ? true : false)
        })
    }
    // 新增弹窗功能
    const handleAdd = () => {
      layer.title = '新增数据'
      layer.show = true
      delete layer.row
    }
    // 编辑弹窗功能
    const handleEdit = (row: object) => {
      layer.title = '编辑数据'
      layer.row = row
      layer.show = true
    }
    watch(activeCategory, (newVal) => {
      getTableData(true)
    })
    // getTableData(true)
    return {
      Plus,
      Search,
      Delete,
      query,
      tableData,
      chooseData,
      loading,
      page,
      layer,
      convertDate,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      handleDel,
      getTableData
    }
  }
})
</script>

<style lang="scss" scoped>
.layout-container {
  width: calc(100% - 10px);
  height: 100%;
  margin: 0 0 0 10px;
}
</style>